<template>
    <div id="app" >
        <router-view></router-view>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import myfooter from './components/myfooter'

    export default {
        name: 'App',
        components: {
            HelloWorld, myfooter
        }, data: function () {
            return {
                "bl": false,
              "footer":"footer"
            ,"zujian":"HelloWorld"}
        }, methods: {
            bg() {
                this.bl = !this.bl;
                console.log(this.bl)
            },
        fatherchangeone(param){
              this.footer=param
        }
        },
        directives: {
            //el指令所在标签元素，binding指令相关信息console.dir(binding)查看详情
            "lima": function (el, binding) {
                console.log(el, binding);
                el.textContent = binding.value


            }

        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        background-color: #42b983;


    }

    #head {
        height: 100px;
        line-height: 100px;
        font-size: 50px;
    }

    .bg {
        background-color: darkslategray;
    }
</style>
